<template>
	<view class="xfx-sinput">
		<view class="search-card" style="background-color: #E4E7ED;">
			<view class="bubble-card" v-show="showBubble&&isBubble">
				<view v-for="(item,index) in searchList" :key="index" @click="clickBubble(item)">

					<!-- {{item}} -->
					{{item.MaterialTypeName}}
				</view>
			</view>
			<view @click="goChange" style="display: flex;justify-content: space-between;width: 100%;height: 80upx;">
				<view>{{title}}</view>
				<image src="@/static/xialaxuanze.png" :class="{'bbb':showBubble}" mode="" />
			</view>
			<!-- <view class="">
			<icon type='search' size='20'></icon>
            <input v-model="searchValue" @confirm='confirmm' :disabled='isDisabled' :placeholder="placeholderText" type="text" name="" id="">
			<icon v-if="searchValue.length>0&&isClear" @click="searchValue=''" type="clear" size="16" color="" />
		</view> -->
		</view>
		<!-- <view v-if="showSearchtext" @click="search" class="search-text" :style="{color:searchColor}">{{searchText}}</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			placeholderText: {
				type: String,
				default: "请输入",
			},
			isBubble: {
				type: Boolean,
				default: true
			},
			searchText: {
				type: String,
				default: '搜索',
			},
			searchColor: {
				type: String,
				default: '#000000'
			},
			isDisabled: {
				type: Boolean,
				default: false
			},
			searchList: {
				type: Array,
				default: function() {
					return []
				}
			},

			showSearchtext: {
				type: Boolean,
				default: true
			},
			isClear: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				title: '请选择',
				showBubble: false,
				searchValue: '',
			}
		},
		watch: {
			searchValue(neww, old) {
				this.$emit('input', neww)
			}
		},
		onLoad() {
			console.log(this.searchList)
		},
		methods: {
			goChange() {

				// this.showBubble = true
				this.showBubble = !this.showBubble

				if (this.isBubble) {
					//    this.showBubble = true
				} else {
					var that = this
					console.log(that.searchList)
					uni.showActionSheet({
						itemList: that.searchList,
						success: function(res) {
							console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
							console.log(that.searchList)
							that.title = that.searchList[res.tapIndex]
							that.$emit('confirm', that.searchList[res.tapIndex])
							that.showBubble = false
						},
						fail: function(res) {
							console.log(res.errMsg);
							that.showBubble = false
						}
					});
				}
				var that = this
				// that.showBubble = true
			},
			clickBubble(item) {
				console.log(item)
				this.$emit('confirm', item)
				this.title = item.MaterialTypeName
				this.showBubble = false
			},
			confirmm(e) {
				console.log(e)
				this.$emit('search')
			},
			search() {
				this.$emit('search')
			}
		}
	}
</script>

<style lang='scss'>
	.xfx-sinput {
		position: fixed;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		/* position: relative; */
		margin-top: 30upx !important;
		z-index: 8888;

		.search-card {
			flex: 1;
			padding: 0 10rpx;
			background: #ffffff;
			border: 1px solid #e2e2e2;
			border-radius: 40rpx;
			display: flex;
			align-items: center;

			.bubble-card {
				position: absolute;
				z-index: 8888;
				width: 89%;
				/* left: 50rpx; */
				top: 110%;

				border: 1px solid #e2e2e2;
				/* background-color: #ffffff; */

				background-color: #fff;
				/* padding: 25rpx; */
				border-radius: 5rpx;
				max-height: 500upx;
				overflow: hidden;
				overflow-y: auto;

				&>view {
					/* margin-bottom: 20rpx; */
					/* border: 1px solid green; */
					height: 70upx;
					line-height: 70upx;
					padding: 0 30upx;
					border-bottom: 1px solid #e2e2e2;
				}

				&>view:nth-last-child(1) {
					margin-bottom: 0;
				}
			}

			.bubble-card::after {
				content: '';
				display: block;
				border: 15rpx solid #ffffff;
				border-left: 15rpx solid transparent;
				border-right: 15rpx solid transparent;
				border-top: 15rpx solid transparent;
				position: absolute;
				top: -28rpx;
				left: 45rpx
			}

			&>view:nth-child(2) {
				display: flex;
				align-items: center;
				padding: 0 15rpx;
				position: relative;

				text {}

				image {
					margin-left: 15rpx;
					transition: all 0.3s;
					width: 25rpx;
					height: 25rpx;
				}
			}

			&>view:nth-child(3) {
				flex: 1;
				padding-left: 25rpx;
				padding-right: 15rpx;
				display: flex;
				align-items: center;

				input {
					padding: 15rpx 10rpx;
				}
			}
		}

		.search-text {
			padding-left: 25rpx;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			line-height: 1;
		}
	}

	.bbb {
		transform: rotate(-180deg);
	}
</style>
